<template>
    <ul>
        <li :class="{active:item.isCompleted==true}" v-for="(item,i) in data" :key="item.id">
            <input type="checkbox" :checked="item.isCompleted"  @change="checkChange(item,$event)" >
            <b>{{item.todo}}</b>
            <button @click="handleClick(i)">删除</button>
        </li>
    </ul>
    <fieldset>
        <legend>详情</legend>
        <button @click="filter('all')">全部:{{allCount}}</button>
        <button @click="filter('completed')">已完成:{{completedCount}}</button>
        <button @click="filter('active')">未完成:{{activeCount}}</button>
    </fieldset>
 
</template>

<script setup>
    import {defineProps,defineEmits, toRefs} from 'vue';
    // 定义props接收
    let props =defineProps(['data','allCount','completedCount','activeCount'])
    let {data,allCount,completedCount,activeCount} =toRefs(props)
    // console.log(data,'1111');
    let emits =defineEmits(['del','getFlag'])

    let handleClick=(i)=>{
        emits('del',i)
    }
    let checkChange=(item,e)=>{
        console.log(e.target.checked);
        item.isCompleted=e.target.checked 
        console.log(item);
        console.log(data);
    }

    let filter=flag =>{
        emits('getFlag',flag)
    }
</script>
<style scoped>
li{
    list-style: none;
}
li input {
  width: 13px;
  height: 13px;
   
}
.active{
    color: aqua;
}
</style>